<!--
 * @Description: 会议大屏
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-08-06 16:14:40
 * @LastEditTime: 2023-05-11 10:21:09
 * @FilePath: \cscec-pms-admin\src\components\ConferenceScreen\ConferenceScreen.vue
-->
<template>
  <div class="bg">
    <div class="box">
      <h3 v-if="$route.query.meetingName">{{ $route.query.meetingName }}</h3>
      <div class="left">
        <h5 v-if="$route.query.branchComName">所属分公司：{{ $route.query.branchComName }}</h5>
        <h5 v-if="$route.query.projectName">所属项目：{{ $route.query.projectName }}</h5>
        <h5 v-if="$route.query.meetingPlace">会议地点：{{ $route.query.meetingPlace }}</h5>
        <h5 v-if=" $route.query.startTime">会议时间：{{ $route.query.startTime }}</h5>
        <h6>请扫描右侧二维码进行会议签到<span /></h6>
      </div>
      <div class="right">
        <!-- //-{{form.etime}} -->
        <!-- <h4>{{ form.stime }}</h4> -->
        <VueQrcode
          class="code"
          :value="$route.query.orCode"
          :options="{ width: 258 }"
        />
      </div>
    </div>
  </div>
</template>
<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'

export default {
  components: {
    VueQrcode
  }
}
</script>
<style lang="less" scoped>
.bg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--heightVh);
  width: var(--widthVw);
  font-size: 0;
  overflow: hidden;
  background: url('~@/assets/conBg.jpg') center center;
  background-size: 100% 100%;

  .box {
    // background-image: radial-gradient(50% 150%, rgba(0, 0, 0, 0) 20%, #000000 100%);
    background-image: radial-gradient(at 50% 150%, rgba(0, 0, 0, 0) 20%, #000000 100%);
    border-radius: 20px;
    border-radius: 20px;
    width: 1400px;
    height: 730px;
    position: relative;

    h3 {
      font-family: PingFangSC-Semibold;
      font-size: 60px;
      color: #ffffff;
      letter-spacing: 0;
      width: 1100px;
      position: absolute;
      left: 100px;
      top: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .back {
      display: inline-block;
      width: 42px;
      height: 42px;
      position: absolute;
      top: 80px;
      right: 100px;
      background: url('~@/assets/back.png') center center;
    }

    .left {
      position: absolute;
      left: 100px;
      top: 225px;
      width: 55%;

      h5 {
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #ffffff;
        letter-spacing: 0;
      }

      h6 {
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #ffffff;
        margin-top: 80px;
        letter-spacing: 0;
        display: flex;
        flex-direction: row;
        align-items: center;

        span {
          display: inline-block;
          height: 24px;
          width: 28px;
          margin-left: 18px;
          background: url('~@/assets/go.png') center center;
        }
      }
    }

    .right {
      background: rgba(0, 0, 0, 0.6);
      border: 4px solid rgba(2, 137, 202, 0.5);
      border-radius: 20px;
      border-radius: 20px;
      position: absolute;
      width: 400px;
      height: 460px;
      top: 195px;
      right: 100px;
      display: flex;

      flex-direction: column;
      align-items: center;
      justify-content: center;

      h4 {
        font-family: PingFangSC-Semibold;
        font-size: 50px;
        color: #0289ca;
        letter-spacing: 0;
        margin-top: 50px;
      }
    }
  }
}
</style>
